<template>

    <div class="self-body">
      <div class="self-header">
        <div class="self-title">
          <span>用户信息</span>
          <hr/>
          <div class="self-user">
              <div class="self-user-group">
                <div class="self-user-group-lable">
                  昵称:
                </div>
                <span v-html="user.userName">
                </span>
              </div>
              <div class="self-user-group">
                <div class="self-user-group-lable">
                  邮箱信息:
                </div>
                <span v-html="user.postbox">
                  </span>
              </div>
          </div>
          <div class="self-user">
            <div class="self-user-group">
              <div class="self-user-group-lable">
                所在地:
              </div>
              <span v-html="user.area">
              </span>
            </div>
            <div class="self-user-group">
              <div class="self-user-group-lable">
                教育经历:
              </div>
              <span v-html="user.educationExperience">
               </span>
            </div>
          </div>

          <div class="self-user">
            <div class="self-user-group">
              <div class="self-user-group-lable">
                简介:
              </div>
              <span v-html="user.briefIntroduction">
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="self-content">
        <div class="self-left">
          <div class="self-left-header">
            <div class="classification-group" @click="loadSelfWorkInfo()">
                <span>我的文章</span>
            </div>
            <div class="classification-group" @click="loadSelfComment()">
               <span>我的回答</span>
            </div>
            <div class="classification-group">
              <span>我关注的</span>
            </div>
            <div class="classification-group">
              <span>关注我的</span>
            </div>
          </div>
          <div class="self-left-content" v-show="showPageFlag === 1">
            <div class="self-workInfo" v-for="(workInfo,index) in workInfoList" @click="lookWorkInfoDetail(workInfo.uuid)" :key="index">
                  <div class="card-content">
                    <div class="card-item">
                      <span class="card-title-font" >{{index+1}}. {{workInfo.title}}</span>
                    </div>
                    <span class="card-content-body" v-html="workInfo.content"></span>
                  </div>
                  <div class="card-footer">
                    <span>关注({{workInfo.followNum}})</span>
                    <span>回答({{workInfo.commentNum}})</span>
                  </div>
              </div>
          </div>
          <div class="self-left-content" v-show="showPageFlag === 2">
            <div class="self-workInfo" v-for="(workInfoComment,index) in workInfoMeCommentList"  :key="index" @click="lookWorkInfoDetail(workInfoComment.workinfoid)">
              <div class="card-content">
                <div class="card-item">
                  <span class="card-title-font" >{{index+1}}. {{workInfoComment.workInfo.title}}</span>
                </div>
                <span class="card-content-body" v-html="workInfoComment.content"></span>
              </div>
              <div class="card-footer">
                <span>点赞({{workInfoComment.giveUpNum}})</span>
              </div>
            </div>
          </div>
          <!--<div class="self-left-content" v-show="showPageFlag === 3">
            <div class="self-workInfo" v-for="(workInfo,index) in workInfoMeCommentList" @click="lookWorkInfoDetail(workInfo.uuid)" :key="index">
              <div class="card-content">
                <div class="card-item">
                  <span class="card-title-font" >{{index+1}}. {{workInfo.title}}</span>
                </div>
                <span class="card-content-body" v-html="workInfo.content"></span>
              </div>
              <div class="card-footer">
                <span>关注({{workInfo.followNum}})</span>
                <span>回答({{workInfo.commentNum}})</span>
              </div>
            </div>
          </div>-->
          <!--<div class="self-left-content" v-show="showPageFlag === 4">
            <div class="self-workInfo" v-for="(workInfo,index) in workInfoList" @click="lookWorkInfoDetail(workInfo.uuid)" :key="index">
              <div class="card-content">
                <div class="card-item">
                  <span class="card-title-font" >{{index+1}}. {{workInfo.title}}</span>
                </div>
                <span class="card-content-body" v-html="workInfo.content"></span>
              </div>
              <div class="card-footer">
                <span>关注({{workInfo.followNum}})</span>
                <span>回答({{workInfo.commentNum}})</span>
              </div>
            </div>
          </div>-->


        </div>
        <div class="self-right">
          <div class="self-header-follow">
              <div class="self-right-me-follow">
                <span>关注了</span>
                <div class="self-left-number">
                  <span>{{user.followResource}}</span>
                </div>
              </div>
              <div class="self-right-follow-me">
                <span>关注者</span>
                <div class="self-left-number">
                  <span>{{user.followUser}}</span>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>

</template>

<style>
  #app {
    background-color: #f6f6f6;
  }
  p img {
    max-width: 100%!important;
    display: block!important;
    margin: 0px auto;
  }
</style>
<style scoped>


  .self-body{
    margin: 10px auto;
    width: 68%;
    min-height: 800px;
    padding: 20px 45px 10px;
  }
  .self-title span{
    font-size: 18px;
    font-weight: 600;
  }

  .self-user-group-lable{
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
  }

  .self-user{
    margin-left: 101px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding-right: 42px;
  }

  .self-user-group{
    display: inline-block;
    flex-grow: 1;
    flex-basis: 0%;
  }

  .self-title hr{
    color: #e6a23c;
    border: solid 1px;
    margin-top: 5px;
  }
  .self-header{
    background-color: white;
    padding: 20px 45px 20px;
  }

  .self-content{
    margin-top: 15px;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .self-left{
    background: white;
    padding-top: 20px;
    flex-basis: 700px;
    flex-grow: 3;
  }
  .self-right{
    flex-grow: 1;
    margin-left: 10px;
    display: flex;
  }
  .self-left-header{
    display: flex;
    justify-content: space-around;
    border-bottom: solid powderblue 1px;
    padding-bottom: 10px;
    background-color: white;
  }
  .self-left-content{
    min-height: 500px;
    background-color: white;
    padding: 10px 10px;
  }

  .classification-group span{
    font-size: 15px;
    font-weight: 300;
  }

  .classification-group span:hover{
    cursor: pointer;
    color: #0084ff;
  }

  .self-workInfo{
    display: inline-block;
    border: solid 1px #eeeeee;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 8px;
  }
  .self-workInfo:hover{
    box-shadow: 0px 0px 8px #cccccc;
    cursor: pointer;
  }
  .card-item{
    display: inline-block;
    vertical-align: text-bottom;
  }
  .card-title-font{
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    vertical-align: middle;
  }
  .card-content-body{
    display: block;
    height: auto;
    margin-top: 10px;
    width: 80%;
  }
  .card-content-body{
    font-size: 15px;
    font-weight: 500;
  }

  .card-footer{
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
  }
  .self-right-me-follow{
  }
  .self-header{
    background-color: white;
  }
  .self-header-follow{
    height: 80px;
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .self-left-number{
    text-align: center;
    margin-top: 5px;
  }
</style>

<script>

    export default {
        data() {
            return {
              user:{
                userName:"",
                phone:"",
                postbox:""
              },
              workInfoList:[],
              workInfoMeCommentList:[],
              showPageFlag:1,//1.展示我的文章,2.我的回答,3.我关注的,4,关注我的
            }
        },
      created() {
        this.initUserInfo();
        this.loadSelfWorkInfo();
      },
      methods:{
          initUserInfo:function () {//初始化用户信息数据
              this.$axios({
                methods:"get",
                url:"/solvePlat/user/getUserAllInfo",
              }).then(res=>{
                this.user = res.data;
              });
          },
        loadSelfWorkInfo:function () {
          this.$axios({
            methods:"get",
            url: "/solvePlat/workInfo/selectSelfWorkInfo",
            pageSize: 8,
            pageNum: 0
          }).then(res=>{
            if (res.data.success === true){
              this.showPageFlag = 1;//我的文章
              this.workInfoList = res.data.data.list;
            } else{
              this.$message.error(res.data.msg);
            }
          })
        },
        lookWorkInfoDetail:function (uuid) {//查看当前任务详情信息
          this.addWorkTaskLookNum(uuid);
          this.$router.push({
            name:"ProblemInfo",
            query:{
              uuid:uuid
            }
          })
        },
        addWorkTaskLookNum:function (workInfoId) {
          this.$axios({
            method: 'get',
            url: '/solvePlat/workInfo/addBrowseNum?uuid='+workInfoId,
          })
            .then(res => {
              if (res.data.success === true){//成功
                if (res.data.data.list.length != 0){
                }
                else{
                }
              }
            })
            .catch(err => {
              console.log('err', err)
            })
        },
        loadSelfComment:function () {

          this.$axios({
            method: 'get',
            url: '/solvePlat/workInfoComment/selectMeWorkInfoComment',
          })
            .then(res => {
              if (res.data.success === true){//成功
                  this.showPageFlag = 2;//查看评论信息
                  this.workInfoMeCommentList = res.data.data.list;
              }
            })
            .catch(err => {
              console.log('err', err)
            })

        }
      }
    }

</script>
